<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动态路由</title>
    <script src="../../vue.js"></script>
    <script src="../../vue-router.js"></script>
</head>

<body>
    <div id="app">
        <h1>我是标题</h1>
        <p>
            <router-link to="/user/foo">go to foo</router-link>
            <router-link to="/user/bar">go to bar</router-link>
        </p>
        <router-view></router-view>
       
    </div>
    <script>
        const User = {
            template:'<p>{{$route.params.id}}</p>'
        }
        /*
            我们有一个 User 组件，对于所有 ID 各不相同的用户，
            都要使用这个组件来渲染，如果是每个id都定义一个组件显然
            不合适，
            这时我们可以在 vue-router 的路由路径中使用『动态路径参数』
            一个『路径参数』使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 
            this.$route.params，可以在每个组件内使用。于是，我们可以更新 User 
            的模板，输出当前用户的 ID：
        */
        const router = new VueRouter({
            routes:[
                {path:'/user/:id',component:User}
            ]
        });
        const app = new Vue({
            router
        }).$mount('#app')

    </script>
</body>

</html>